<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小米商城</title>
		<link rel="icon" href="//s01.mifile.cn/favicon.ico"/>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/web.js" ></script>
	</head>
	<body>
	<!-- start header -->
	<div id="app">
		<header>
			<div class="top center">
				<div class="left fl">
					<ul>
						<li><a href="index.html" target="_blank">小米商城</a></li>
						<li>|</li>
						<li><a href="">MIUI</a></li>
						<li>|</li>
						<li><a href="">米聊</a></li>
						<li>|</li>
						<li><a href="">游戏</a></li>
						<li>|</li>
						<li><a href="">多看阅读</a></li>
						<li>|</li>
						<li><a href="">云服务</a></li>
						<li>|</li>
						<li><a href="">金融</a></li>
						<li>|</li>
						<li><a href="">小米商城移动版</a></li>
						<li>|</li>
						<li><a href="">问题反馈</a></li>
						<li>|</li>
						<li><a href="">Select Region</a></li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="right fr">
					<div class="gouwuche fr"><a href="gouwuche.html">购物车</a></div>
					<div class="fr">
						<ul>
							<li><a style="cursor:pointer" v-on:click="jump()" target="_blank">{{omg}}</a></li>
							<li>|</li>
							<li><a href="register.html" target="_blank" >注册</a></li>
							<li>|</li>
							<li><a href="">订单中心</a></li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</header>
	<!--end header -->

<!-- start banner_x -->
		<div class="banner_x center" >
			<a href="./index.html" target="_blank"><div class="logo fl"></div></a>
			<a href=""><div class="ad_top fl"></div></a>
			<div class="nav fl">
				<ul>
					<!--模糊搜索全部商品-->
					<li v-on:click="search()"><a href="#">全部商品</a></li>
					<!--点击时传入类名（如小米手机），存下来跳到下一页时取出-->
					<li v-on:click="go('小米手机')"><a href="liebiao.html" >小米手机</a></li>
					<li v-on:click="go('红米手机')"><a href="liebiao.html" >红米手机</a></li>
					<li v-on:click="go('笔记本电脑')"><a href="liebiao.html" >笔记本电脑</a></li>
					<li v-on:click="go('电视')"><a href="liebiao.html" >电视</a></li>
					<li v-on:click="go('路由器')"><a href="liebiao.html" >路由器</a></li>
					<li v-on:click="go('智能硬件')"><a href="liebiao.html" >智能硬件</a></li>
				</ul>
			</div>
			<div class="search fr">
				<!--//提交到搜索页面-->
				<form action="search.html" >
					<div class="text fl">
						<input id="inp" type="text" class="shuru"  >
					</div>
					<div class="submit fl">
						<!--模糊搜索商品-->
						<input type="submit" class="sousuo" value="搜索" v-on:click="search()"/>
					</div>
					<div class="clear"></div>
				</form>
				<div class="clear"></div>
			</div>
		</div>
<!-- end banner_x -->

	<!-- start banner_y -->
		<div class="banner_y center">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			  <!-- Indicators -->
			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
			  </ol>
			
			  <!-- Wrapper for slides -->
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="image/zym4.jpg" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			    <div class="item">
			      <img src="image/zym1.jpg" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			    <div class="item">
			      <img src="image/zym2.jpg" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			    <div class="item">
			      <img src="image/zym3.jpg" alt="...">
			      <div class="carousel-caption">
			      </div>
			  </div>
			
			  <!-- Controls -->
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">&lt;</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">&gt;</span>
			  </a>
			</div>
		</div>	
	</div>
		<div class="sub_banner center">
			<div class="sidebar fl">
				<div class="fl"><a href=""><img src="./image/hjh_01.gif"></a></div>
				<div class="fl"><a href=""><img src="./image/hjh_02.gif"></a></div>
				<div class="fl"><a href=""><img src="./image/hjh_03.gif"></a></div>
				<div class="fl"><a href=""><img src="./image/hjh_04.gif"></a></div>
				<div class="fl"><a href=""><img src="./image/hjh_05.gif"></a></div>
				<div class="fl"><a href=""><img src="./image/hjh_06.gif"></a></div>
				<div class="clear"></div>
			</div >
			<div class="datu fl" v-on:click="godeatil('20180807')"><a href="xiangqing.html"><img src="./image/inxiaomimix2s.jpg" alt=""></a></div>
			<div class="datu fl" v-on:click="godeatil('20180817')"><a href="xiangqing.html"><img src="./image/inhongmi6.jpg" alt=""></a></div>
			<div class="datu fr"  v-on:click="godeatil('20180838')"><a href="xiangqing.html"><img src="./image/injingshuiq.jpg" alt=""></a></div>
			<div class="clear"></div>


		</div>
	<!-- end banner -->

	<!-- start danpin -->
		<div class="danpin center">
			
			<div class="biaoti center" >小米明星单品</div>
			<!--小米8se横图-->
			<div>
				<a v-on:click="goSale('20180809')" href="xiangqing.html" >  <img src="image/xiaomi8se.jpg" style="width: 1226px;margin-left:150px;" /></a>
			</div>
			<div class="main center" style="margin-top: 30px;">
				<!--查出销量最高的前五名-->
				<div class="mingxing fl" v-for="p in list">
					<div class="sub_mingxing" ><a v-on:click="goSale(p.productCode)" href="xiangqing.html" ><img v-bind:src="photourl+p.productPhoto" alt=""></a></div>
						<div class="pinpai" ><a v-on:click="goSale(p.productCode)" href="xiangqing.html" >{{p.productName}}</a></div>
						<div class="youhui">{{p.productComment}}</div>
						<div class="jiage">{{p.productPrice}}元</div>
						
				</div>
				
				<div class="clear"></div>
			</div>
		</div>
	<div class="danpin center">
			
			<div class="biaoti center">家电</div>
			<!--家电横图-->
			<div id=""  >
				<a v-on:click="goSale('20180822')" href="xiangqing.html" >  <img src="image/jiadian.jpg" style="float:left;width: 1226px;margin-left:150px;" /></a>
			</div>
			<div class="main center" style="margin-top: 150px;">
				<!--查出销量最高的前五名-->
				<div class="mingxing fl" v-for="p in list2">
					<div class="sub_mingxing" ><a v-on:click="goSale(p.productCode)" href="xiangqing.html" ><img v-bind:src="photourl+p.productPhoto" alt=""></a></div>
						<div class="pinpai" ><a v-on:click="goSale(p.productCode)" href="xiangqing.html" >{{p.productName}}</a></div>
						<div class="youhui">{{p.productComment}}</div>
						<div class="jiage">{{p.productPrice}}元</div>
						
				</div>
				<div class="clear"></div>
			</div>
			<div class="main center" style="margin-top: 40px;">
				<!--查出销量最高的前五名-->
				<div class="mingxing fl" v-for="p in list3">
					<div class="sub_mingxing" ><a v-on:click="goSale(p.productCode)" href="xiangqing.html" ><img v-bind:src="photourl+p.productPhoto" alt=""></a></div>
						<div class="pinpai" ><a v-on:click="goSale(p.productCode)" href="xiangqing.html" >{{p.productName}}</a></div>
						<div class="youhui">{{p.productComment}}</div>
						<div class="jiage">{{p.productPrice}}元</div>
						
				</div>
				<div class="remenlast fr">
						<div class="hongmi"><a v-on:click="goSale('20180838')" href="xiangqing.html" ><img src="./image/xiaomijinghua.jpg" alt=""></a></div>
						<div class="liulangengduo"><a v-on:click="search()" href="###" ><img src="./image/liulangengduo1.png" alt=""></a></div>					
					</div>
				<div class="clear"></div>
			</div>
		</div>
		
		<div class="danpin center">
			
			<div class="biaoti center">智能硬件</div>
			<!--智能硬件横图-->
			<div>
				<a v-on:click="goSale('20180836')" href="xiangqing.html" >  <img src="image/zhinengyingjian.jpg" style="width: 1226px;margin-left:150px;" /></a>
			</div>
			<div class="main center" style="margin-top: 30px;">
				<!--查出销量最高的前五名-->
				<div class="mingxing fl" v-for="p in list4">
					<div class="sub_mingxing" ><a v-on:click="goSale(p.productCode)" href="xiangqing.html" ><img v-bind:src="photourl+p.productPhoto" alt=""></a></div>
						<div class="pinpai" ><a v-on:click="goSale(p.productCode)" href="xiangqing.html" >{{p.productName}}</a></div>
						<div class="youhui">{{p.productComment}}</div>
						<div class="jiage">{{p.productPrice}}元</div>
						
				</div>
				
				<div class="clear"></div>
			</div>
		</div>
			</div>
		<footer class="mt20 center" style="margin-top:200px;">			
			<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
			<div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：151-3503-4757，本网站所列数据，除特殊说明，所有数据均出自昭平科技实验室测试</div>
		</footer>
	</div>	
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				productname:"",
				page:"1",
				pagesize:"5",
				list:[],
				photourl:window.web_server_static,
				list2:[],
				list3:[],
				list4:[],
				code1:"电视",
				code2:"路由器",
				code3:"智能硬件",
				uuu:window.sessionStorage.getItem('loginUsername'),
				omg:'',
				web_server:window.web_server
			},
			created:function(){
				this.saleCountNum(),
				this.goSaleCountTV(),
				this.goSaleCountRount(),
				this.goSaleYing(),
				this.dengl()
				
			},
			methods:{
				dengl:function(){
//						var uuu=window.sessionStorage.getItem('loginUsername');
						if(this.uuu==null){
							this.omg="登录";														
						}else{
								this.omg=this.uuu;
						}													
					},
				jump:function(){
					if(this.uuu!=null){
						window.location.href="self_info.html";
					}else{
						window.location.href="login.html";
					}
				},
				//明星单品
				saleCountNum:function(){					
					var self=this;										
					//取出搜索框存的用户写的搜索值
					self.name=name
					var params=new URLSearchParams();
					params.append("productname","");
					params.append("page",self.page);
					params.append("pagesize",self.pagesize);
					//必须要写
					axios.defaults.withCredentials = true;
					axios.post(web_server+"api/product/fuzzysalecount",params).then(function(res){
						var a=0;
						a=res.data;
						if(a.status==200){
							self.list=a.data.list;
							//alert("a")
						}
					})
				},
				go:function(name){
					//存类名
					window.sessionStorage.setItem("name",name);
				},
				search:function(){
					var a=document.getElementById("inp").value;
					window.sessionStorage.setItem("fuzzy",a);
					if(1==1){
						window.location.href="search.html";
					}
					
				},
				godeatil:function(code){
					window.sessionStorage.setItem("code",code);
				},
				//销量单品
				goSale:function(code){
					window.sessionStorage.setItem("code",code);
				},
				//查询电视按销量
				goSaleCountTV:function(){
					var self=this;
					var params=new URLSearchParams();
					params.append("catename",self.code1);
					params.append("page",self.page);
					params.append("pagesize",self.pagesize);
					//必须要写
					axios.defaults.withCredentials = true;
						axios.post(web_server+"api/product/salenum",params).then(function(res){
						var a=0;
						a=res.data;
						if(a.status==200){
							self.list2=a.data.list;
						}else{
							alert("失败");
						}
					})
				},
				//家电路由器
				goSaleCountRount:function(){
					var self=this;
					var params=new URLSearchParams();
					params.append("catename",self.code2);
					params.append("page",self.page);
					params.append("pagesize",self.pagesize);
					//必须要写
					axios.defaults.withCredentials = true;
						axios.post(web_server+"api/product/salenum",params).then(function(res){
						var a=0;
						a=res.data;
						if(a.status==200){
							self.list3=a.data.list;
						}else{
							alert("失败");
						}
					})
				},
				goSaleYing:function(){
					var self=this;
					var params=new URLSearchParams();
					params.append("catename",self.code3);
					params.append("page",self.page);
					params.append("pagesize",self.pagesize);
					//必须要写
					axios.defaults.withCredentials = true;
						axios.post(web_server+"api/product/salenum",params).then(function(res){
						var a=0;
						a=res.data;
						if(a.status==200){
							self.list4=a.data.list;
						}else{
							alert("失败");
						}
					})
				}
				
				
			}
		})
	</script>
</html>